<template>
  <div class="container gray">
    <div class="header">
      <div class="header-wrapper">
        <div class="header-left">
          <a href="" class="logo"></a>
        </div>
        <div class="header-right" @click="headerClick($event)">
          <div href="" class="right__item" id="index">首页</div>
          <div href="" class="right__item" id="login">登录</div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="index-main-wrapper">
        <el-carousel indicator-position="none" height="762px">
          <el-carousel-item v-for="item in 3" :key="item">
            <div
              class="carousel-item"
              :style="{
                background: 'url(./static/image/' + item + '.png) 50% center / cover no-repeat',
                height: '100%',
                width: '100%',
              }"
            ></div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="core-wrapper">
        <div class="content-core">
          <div
            class="content-core-item"
            @mouseover="coreOver('first')"
            @mouseout="coreOut()"
            @click="moveTo('first')"
          >
            <div
              class="item-img"
              :style="{
                'background-image':
                  isActive == 'first'
                    ? 'url(./static/image/first-active.png)'
                    : 'url(./static/image/first.png)',
              }"
            ></div>
            <div :class="[isActive == 'first' ? 'item-text-active' : 'item-text']">
              加油卡/话费充值
            </div>
          </div>
          <div
            class="content-core-item"
            @mouseover="coreOver('second')"
            @mouseout="coreOut()"
            @click="moveTo('second')"
          >
            <div
              class="item-img"
              :style="{
                'background-image':
                  isActive == 'second'
                    ? 'url(./static/image/second-active.png)'
                    : 'url(./static/image/second.png)',
              }"
            ></div>
            <div :class="[isActive == 'second' ? 'item-text-active' : 'item-text']">加油商城</div>
          </div>
          <div
            class="content-core-item"
            @mouseover="coreOver('third')"
            @mouseout="coreOut()"
            @click="moveTo('third')"
          >
            <div
              class="item-img"
              :style="{
                'background-image':
                  isActive == 'third'
                    ? 'url(./static/image/third-active.png)'
                    : 'url(./static/image/third.png)',
              }"
            ></div>
            <div :class="[isActive == 'third' ? 'item-text-active' : 'item-text']">知识城邦</div>
          </div>
          <!-- <div
            class="content-core-item"
            @mouseover="coreOver('forth')"
            @mouseout="coreOut()"
            @click="moveTo('forth')"
          >
            <div
              class="item-img"
              :style="{
                'background-image':
                  isActive == 'forth'
                    ? 'url(./static/image/forth-active.png)'
                    : 'url(./static/image/forth.png)',
              }"
            ></div>
            <div
              :class="[isActive == 'forth' ? 'item-text-active' : 'item-text']"
            >
              票卷旅游
            </div>
          </div> -->
        </div>
      </div>
      <div ref="first" class="comm owner">
        <div ref="first-anchor" class="anchor"></div>
        <div class="section-seq">01</div>
        <div class="section-title">1000万+车主的选择</div>
        <ul class="owner-advantages">
          <li class="owner-advantages-item">
            <img src="/static/image/01/01-1-1.png" alt="" />
            <div class="owner-advantages-item__text">圈存即可使用</div>
          </li>
          <li class="owner-advantages-item">
            <img src="/static/image/01/01-1-2.png" alt="" />
            <div class="owner-advantages-item__text">安全又快捷</div>
          </li>
          <li class="owner-advantages-item">
            <img src="/static/image/01/01-1-3.png" alt="" />
            <div class="owner-advantages-item__text">优惠充值</div>
          </li>
          <li class="owner-advantages-item">
            <img src="/static/image/01/01-1-4.png" alt="" />
            <div class="owner-advantages-item__text">2小时快速到帐</div>
          </li>
          <li class="owner-advantages-item">
            <img src="/static/image/01/01-1-5.png" alt="" />
            <div class="owner-advantages-item__text">更多优惠套餐</div>
          </li>
        </ul>
        <div class="owner-content">
          <div class="owner-recharge">
            <h5 class="owner-recharge-title">
              <i class="j-icon-recharge"></i>
              选择充值业务
            </h5>
            <ul class="owner-business">
              <li
                :class="['pointer', ownerSelected == 1 ? 'is-active' : '']"
                @click="ownerSelect(1)"
              >
                <div
                  class="owner-business__card"
                  style="background-image: url('/static/image/01/01-2-3.png')"
                >
                  <p class="owner-business__card-title">中石油/中石化加油卡</p>
                  <p class="owner-business__card-subtitle">即充即时到账</p>
                  <p class="owner-business__card-bottom">·仅支持个人记名主卡</p>
                </div>
                <div class="owner-business__radio">
                  <i class="j-radio-icon"></i>
                  加油卡充值
                </div>
              </li>
              <li
                :class="['pointer', ownerSelected == 2 ? 'is-active' : '']"
                @click="ownerSelect(2)"
              >
                <div
                  class="owner-business__card"
                  style="background-image: url('/static/image/01/01-2-4.png')"
                >
                  <p class="owner-business__card-title">手机话费充值</p>
                  <p class="owner-business__card-subtitle">即充即时到账，99折优惠</p>
                  <p class="owner-business__card-bottom">·更多优惠下载加油宝App</p>
                </div>
                <div class="owner-business__radio">
                  <i class="j-radio-icon"></i>
                  手机话费充值
                </div>
              </li>
            </ul>
            <el-button type="primary" size="default" class="j-button">
              立即支付
              <i class="icon-right-arrow"></i>
            </el-button>
          </div>
        </div>
      </div>
      <div ref="second" class="comm shop">
        <div ref="second-anchor" class="anchor"></div>
        <div class="section-seq">02</div>
        <div class="section-title">超多好物品质购</div>
        <div class="shop-container">
          <ul class="shop-nav">
            <li>
              <img class="j-icon" src="/static/image/you.png" alt="" />
              品质好货
            </li>
            <li>
              <img class="j-icon" src="/static/image/zheng.png" alt="" />
              正品保障
            </li>
            <li>
              <img class="j-icon" src="/static/image/qi.png" alt="" />
              7天内发货
            </li>
            <li>
              <img class="j-icon" src="/static/image/quanqiu.png" alt="" />
              全球直购
            </li>
          </ul>
          <div class="shop-group">
            <div class="shop-group-carousel"></div>
            <div class="shop-group-item">
              <div
                data-v-18a2f4ba=""
                class="shop-group-item__img bg-expand-animation"
                style="background-image: url('/static/image/bitmap_one.png')"
              ></div>
              <div data-v-18a2f4ba="" class="shop-group-item__content">
                <p data-v-18a2f4ba="" class="shop-group-item__title">限时秒杀</p>
                <p data-v-18a2f4ba="" class="shop-group-item__name">复配成分亚精胺</p>
                <p data-v-18a2f4ba="" class="shop-group-item__desc">限时秒杀中</p>
              </div>
            </div>
            <div class="shop-group-item is-reverse">
              <div
                data-v-18a2f4ba=""
                class="shop-group-item__img bg-expand-animation"
                style="background-image: url('/static/image/essenceAmine.png')"
              ></div>
              <div data-v-18a2f4ba="" class="shop-group-item__content">
                <p data-v-18a2f4ba="" class="shop-group-item__title">智能美容仪</p>
                <p data-v-18a2f4ba="" class="shop-group-item__name">六兆赫高射频能量</p>
                <p data-v-18a2f4ba="" class="shop-group-item__desc">顺丰到家</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div ref="third" class="comm knowledge">
        <div ref="third-anchor" class="anchor"></div>
        <div class="section-seq">03</div>
        <div class="section-title">图书大观园</div>
        <ul class="knowledge-nav">
          <li>
            <img class="j-icon" src="/static/image/bainian.jpg" alt="" />
          </li>
          <li>
            <img
              class="j-icon"
              src="/static/image/baiye.jpg"
              style="width: 328px; height: 324px; margin-left: 10px"
              alt=""
            />
          </li>
          <li>
            <img
              class="j-icon"
              src="/static/image/santi.jpg"
              style="width: 290px; height: 290px; margin-left: 14px"
              alt=""
            />
          </li>
          <li>
            <img
              class="j-icon"
              src="/static/image/live.jpg"
              style="width: 290px; height: 290px; margin-left: 18px"
              alt=""
            />
          </li>
        </ul>
        <ul class="knowledge-nav1">
          <li>
            <img class="j-icon1" src="/static/image/douban.png" alt="" />
            豆瓣读书
          </li>
          <li>
            <img class="j-icon1" src="/static/image/dangdang.png" alt="" />
            当当网
          </li>
          <li>
            <img class="j-icon1" src="/static/image/jingdong.png" alt="" />
            京东买书
          </li>
          <li>
            <img class="j-icon1" src="/static/image/taobao.png" alt="" />
            淘宝买书
          </li>
        </ul>
      </div>
      <!-- <div ref="forth" class="comm play">
        <div ref="forth-anchor" class="anchor"></div>
        <div class="section-seq">04</div>
      </div> -->
    </div>
    <div style="display: none">
      <img src="/static/image/first.png" alt="" />
      <img src="/static/image/second.png" alt="" />
      <img src="/static/image/third.png" alt="" />
      <img src="/static/image/forth.png" alt="" />
      <img src="/static/image/first-active.png" alt="" />
      <img src="/static/image/second-active.png" alt="" />
      <img src="/static/image/third-active.png" alt="" />
      <img src="/static/image/forth-active.png" alt="" />
    </div>
    <maskMy :obj="obj" @know="hiddeMask = true" v-if="!hiddeMask"></maskMy>
    <div data-v-8aa3dfbc="" class="j-footer">
      <div data-v-8aa3dfbc="" class="j-footer__top">
        <div data-v-8aa3dfbc="" class="j-footer__info">
          <p data-v-8aa3dfbc="" class="j-footer__time">
            <span data-v-8aa3dfbc="" class="j-footer__text">客服热线</span>
            (09:00～21:00)
          </p>
          <p data-v-8aa3dfbc="" class="j-footer__tel">
            <i data-v-8aa3dfbc="" class="icon-tel"></i>
            <span data-v-8aa3dfbc="" class="j-footer__tel-text">400-666-5685</span>
          </p>
          <div data-v-8aa3dfbc="" class="j-footer-partners">
            合作伙伴
            <img
              data-v-8aa3dfbc=""
              src=""
              class="partner-icon"
              style="margin-left: 14px"
            />
            <img
              data-v-8aa3dfbc=""
              src=""
              class="partner-icon"
            />
            <img
              data-v-8aa3dfbc=""
              src=""
              class="partner-icon"
            />
            <img
              data-v-8aa3dfbc=""
              src=""
              class="partner-icon"
            />
            <img
              data-v-8aa3dfbc=""
              src=""
              class="partner-icon"
            />
            <img
              data-v-8aa3dfbc=""
              src=""
              class="partner-icon"
            />
            <img
              data-v-8aa3dfbc=""
              src=""
              class="partner-icon"
            />
            <img
              data-v-8aa3dfbc=""
              src=""
              class="partner-icon"
            />
            <img
              data-v-8aa3dfbc=""
              src=""
              class="partner-icon"
            />
            <img
              data-v-8aa3dfbc=""
              src=""
              class="partner-icon"
            />
            <img
              data-v-8aa3dfbc=""
              src=""
              class="partner-icon"
            />
          </div>
        </div>
        <div data-v-8aa3dfbc="" class="j-footer__qrcode">
          <div data-v-8aa3dfbc="" class="j-footer__qrcode-item">
            <img data-v-8aa3dfbc="" src="/static/img/mobile.87a154f.png" width="80" height="80" />
            <span data-v-8aa3dfbc="" style="font-size: 12px">手机APP下载</span>
          </div>
        </div>
      </div>
      <div data-v-8aa3dfbc="" class="j-footer__bottom">
        <span data-v-8aa3dfbc="" class="copyright">
          Copyright © 2014-2024 加油宝 All Rights Reserved
          <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #9da5b3">
            京ICP备89482918号
          </a>
          网站隐私条款
        </span>
        <span data-v-8aa3dfbc="" class="ident-icon">
          <img
            data-v-8aa3dfbc=""
            src=""
            alt=""
            class="ident-item-icon"
          />
          <img
            data-v-8aa3dfbc=""
            src=""
            alt=""
            class="ident-item-icon"
          />
          <img
            data-v-8aa3dfbc=""
            src=""
            alt=""
            class="ident-item-icon"
          />
          <img
            data-v-8aa3dfbc=""
            src=""
            alt=""
            class="ident-item-icon"
          />
          <img
            data-v-8aa3dfbc=""
            src=""
            alt=""
            class="ident-item-icon"
          />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
  import maskMy from './mask.vue';
  export default {
    data() {
      return {
        isActive: 'first',
        ownerSelected: 1,
        obj: {},
        hiddeMask: true,
      };
    },
    components: {
      maskMy,
    },
    mounted() {
      this.testRequestIdelCallback();
      this.scrollActive();
      let login = document.getElementById('login');
      let left = login.offsetLeft - 7 + 'px';
      let top = login.offsetTop - 7 + 'px';
      let width = login.offsetWidth + 'px';
      let height = login.offsetHeight + 'px';
      console.log(left, top, width, height);
      this.obj = Object.assign({
        top,
        left,
        width,
        height,
      });
      let kwon = window.localStorage.getItem('kwon');
      if (!kwon) {
        this.hiddeMask = false;
      }
    },
    methods: {
      testRequestIdelCallback() {
        console.time('average time');
        let largeArray = new Array(10000000).fill(0).map(() => {
          return Math.random() * 100;
        });

        //let average = this.calculateAverage(largeArray);
        this.calculateAverage(largeArray)
          .then(average => {
            console.log('Average:', average);
            console.timeEnd('average time');
          })
          .catch(error => {
            console.error('Error calculating average:', error);
          });
        //console.log("average value:", average);
        //console.timeEnd("average time");
      },
      calculateAverage(array) {
        //return array.reduce((acc, cur) => acc + cur) / array.length;
        return new Promise(resolve => {
          let sum = 0;
          let processedCount = 0;
          const totalCount = array.length;

          const processChunk = deadline => {
            while (
              (deadline.timeRemaining() > 0 || deadline.didTimeout) &&
              processedCount < totalCount
            ) {
              sum += array[processedCount];
              processedCount++;
            }

            if (processedCount < totalCount) {
              // More chunks to process
              requestIdleCallback(processChunk);
            } else {
              // All chunks processed, resolve with the average
              const average = sum / totalCount;
              resolve(average);
            }
          };

          // Start the first chunk processing
          requestIdleCallback(processChunk);
        });
      },
      ownerSelect(index) {
        this.ownerSelected = index;
      },
      headerClick(event) {
        let id = event.target.id;
        if (id === 'index') {
          this.$router.push('/');
        } else if (id === 'login') {
          // this.$router.push({
          //   path: '/login',
          //   query: { systemCode:"refuel" }
          // });
          let host = window.location.host;
          window.location.href = `http://${host}/#/login?systemCode=refuel`;
        }
      },
      coreOver(index) {
        this.changeCore(index);
      },
      coreOut() {
        this.changeCore('');
        this.calcActive();
      },
      changeCore(index) {
        this.isActive = index;
      },
      moveTo(index) {
        let dom = this.$refs[index + '-anchor'];
        if (Array.isArray(dom)) {
          dom = dom[0];
        }
        dom.scrollIntoView({
          block: 'start',
          behavior: 'smooth',
        });
      },
      scrollActive() {
        let that = this;
        window.onscroll = function () {
          that.calcActive();
        };
      },

      calcActive() {
        let that = this;
        let first = that.$refs.first;
        let second = that.$refs.second;
        let third = that.$refs.third;
        // let forth = that.$refs.forth;

        let firstTop = first.offsetTop;
        let secondTop = second.offsetTop;
        let thirdTop = third.offsetTop;
        // let forthTop = forth.offsetTop;

        let firstHight =
          parseInt(window.getComputedStyle(first).height) +
          parseInt(window.getComputedStyle(first).paddingTop) +
          parseInt(window.getComputedStyle(first).paddingBottom);
        let secondHight =
          parseInt(window.getComputedStyle(second).height) +
          parseInt(window.getComputedStyle(second).paddingTop) +
          parseInt(window.getComputedStyle(second).paddingBottom);
        let thirdHight =
          parseInt(window.getComputedStyle(third).height) +
          parseInt(window.getComputedStyle(third).paddingTop) +
          parseInt(window.getComputedStyle(third).paddingBottom);
        // let forthHight =
        //   parseInt(window.getComputedStyle(forth).height) +
        //   parseInt(window.getComputedStyle(forth).paddingTop) +
        //   parseInt(window.getComputedStyle(forth).paddingBottom);

        let scrollValue = parseInt(document.documentElement.scrollTop);

        if (scrollValue < firstTop) {
          that.isActive = 'first';
        } else if (
          firstTop - firstHight / 3 <= scrollValue &&
          scrollValue + secondHight / 3 < secondTop
        ) {
          that.isActive = 'first';
        } else if (
          secondTop - secondHight / 3 <= scrollValue &&
          scrollValue + thirdHight / 3 < thirdTop
        ) {
          that.isActive = 'second';
        } else that.isActive = 'third';
      },
    },
  };
</script>

<style lang="scss" scoped>
  .container {
    min-width: 1200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    .header {
      position: absolute;
      top: 0;
      left: 0;
      background-color: #fff;
      width: 100%;
      font-size: 16px;
      font-family: 'MicrosoftYaHei-Bold', 'MicrosoftYaHei';
      z-index: 2;
      box-shadow: 0 5px 13px 0 hsla(0, 0%, 64%, 0.11);
      .header-wrapper {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: center;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        .header-left {
          width: 600px;
          height: 100%;
          line-height: 100px;
          text-align: left;
          .logo {
            display: inline-block;
            width: 123px;
            height: 43px;
            vertical-align: middle;
            background: url('/static/image/logo.png') no-repeat;
          }
        }
        .header-right {
          padding-left: 60px;
          width: 600px;
          height: inherit;
          display: flex;
          flex-direction: center;
          justify-content: flex-end;
          align-items: center;
          flex-wrap: nowrap;
          .right__item {
            color: rgb(255, 110, 52);
            font-size: 16px !important;
            margin-right: 60px;
            padding: 0;
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            position: relative;
            text-decoration: none;
            outline: 0;
            cursor: pointer;
            padding: 0;
            font-size: 14px;
            font-weight: 500;
            &:hover {
              color: #ff9303;
            }
          }
        }
      }
    }
    .main {
      .index-main-wrapper {
        position: relative;
        width: 100%;
        height: 760px;
        z-index: 1;
        .carousel-item {
        }
      }
      .core-wrapper {
        width: 100%;
        height: 120px;
        position: sticky;
        top: 0;
        left: 0;
        padding: 15px 0 0 0;
        box-sizing: content-box;
        background: #fff;
        z-index: 100;
        transition: padding 0.2s;
        box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.2);
        .content-core {
          display: flex;
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          padding: 0 110px;
          .content-core-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            cursor: pointer;
            .item-img {
              background-repeat: no-repeat;
              background-position: center;
              box-sizing: border-box;
              width: 100%;
              height: 60%;
              text-align: center;
            }
            .item-text {
              height: 40%;
              line-height: 36px;
              font-size: 20px;
            }
            .item-text-active {
              height: 40%;
              line-height: 36px;
              font-size: 20px;
              color: #ff6e34;
            }
          }
        }
      }
      .comm {
        position: relative;
        width: 100%;
        padding-top: 135px;
        text-align: center;
        color: #fff;
        font-size: 25px;
        .anchor {
          position: absolute;
          left: 0;
          top: -135px;
        }
      }
      .owner {
        height: auto;
        background-color: #fff;
        .section-seq {
          font-size: 42px;
          font-family: RobotoMono-Bold, RobotoMono;
          font-weight: 700;
          color: #000;
          line-height: 55px;
          letter-spacing: 1px;
          position: relative;
          text-align: center;
          &::after {
            content: 'SERVICES';
            width: 343px;
            height: 32px;
            font-size: 24px;
            font-family: RobotoMono-Medium, RobotoMono;
            font-weight: 500;
            color: rgba(244, 147, 60, 0.15);
            line-height: 32px;
            letter-spacing: 5px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            z-index: 0;
          }
        }
        .section-title {
          height: 56px;
          font-size: 48px;
          font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
          font-weight: 700;
          color: #000;
          line-height: 56px;
          text-align: center;
          margin-bottom: 55px;
        }
        .owner-advantages {
          width: 100%;
          margin-bottom: 51px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          flex-wrap: nowrap;
          .owner-advantages-item {
            width: 230px;
            height: 100px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            &:hover {
              box-shadow: -1px 6px 34px 8px rgba(60, 78, 105, 0.05);
            }
            .owner-advantages-item__text {
              margin-left: 30px;
              font-size: 16px;
              color: rgb(33, 37, 41);
            }
          }
        }
        .owner-content {
          padding: 30px 0;
          background:
            url('/static/image/01/01-2-1.png') center center / 2560px 489px no-repeat,
            linear-gradient(
              to right,
              rgb(255, 102, 0) 0%,
              rgb(255, 102, 0) 50%,
              rgb(255, 182, 0) 51%,
              rgb(255, 182, 0) 100%
            );
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          flex-wrap: nowrap;
          .owner-recharge {
            text-align: center;
            background: #fff;
            box-shadow: 0 4px 39px 0 rgba(254, 95, 25, 0.3);
            padding: 37px 43px;
            transform: translate3d(30%, 0, 0);
            .owner-recharge-title {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              flex-wrap: nowrap;
              justify-content: flex-start;
              height: 26px;
              font-size: 20px;
              font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
              font-weight: 700;
              color: #000;
              line-height: 26px;
              .j-icon-recharge {
                width: 22px;
                height: 22px;
                display: inline-block;
                margin-right: 15px;
                background-image: url('/static/image/01/01-2-2.png');
              }
            }
            .owner-business {
              display: flex;
              flex-direction: row;
              align-items: center;
              flex-wrap: nowrap;
              justify-content: center;
              width: 100%;
              justify-content: space-between;
              margin: 23px 0 44px;
              background: no-repeat 50%/100% 100%;
              > li {
                justify-content: center;
                width: 330px;
                height: 200px;
                flex-direction: column;
                box-sizing: border-box;
                padding: 15px 35px;
                cursor: pointer;
                border: 2px solid transparent;
                .owner-business__card {
                  background: no-repeat 50%/100% 100%;
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  align-items: center;
                  flex-wrap: nowrap;
                  padding: 22px 0 19px 17px;
                  justify-content: space-between;
                  flex-direction: column;
                  align-items: flex-start;
                  font-size: 12px;
                  font-family:
                    PingFangSC-Regular,
                    PingFang SC;
                  font-weight: 400;
                  color: #fff;
                  line-height: 18px;
                  .owner-business__card-title {
                    font-size: 20px;
                    font-weight: 600;
                    line-height: 24px;
                  }
                  .owner-business__card-title {
                    margin-top: 5px;
                  }
                  .owner-business__card-bottom {
                    color: #ffe29c;
                    margin-top: 30px;
                  }
                }
                .owner-business__radio {
                  color: #000;
                  font-size: 16px;
                  margin-top: 12px;
                  .j-radio-icon {
                    width: 16px;
                    height: 16px;
                    margin-right: 6px;
                    display: inline-block;
                    background: url('/static/image/01/01-2-7.png') no-repeat 50%/100% 100%;
                  }
                }
              }
              > li.is-active {
                border-radius: 4px;
                border: 2px solid #f4933c;
                .j-radio-icon {
                  background-image: url('/static/image/01/01-2-6.png');
                }
              }
            }
            .j-button {
              width: 336px;
              height: 62px;
              font-size: 16px;
              border-color: transparent;
              background: linear-gradient(90deg, #ff9303, #fe5f19);
              -webkit-box-shadow: 0 7px 17px 0 rgba(255, 110, 52, 0.3);
              box-shadow: 0 7px 17px 0 rgba(255, 110, 52, 0.3);
              outline: none;
              font-size: 16px;
              span > i.icon-right-arrow {
                display: inline-block;
                width: 28px;
                height: 12px;
                background: url('/static/image/01/01-2-5.png') no-repeat 50%/100%;
                margin-left: 6px;
              }
            }
          }
        }
      }
      .shop {
        height: auto;
        background-color: #fff;
        .section-seq {
          font-size: 42px;
          font-family: RobotoMono-Bold, RobotoMono;
          font-weight: 700;
          color: #000;
          line-height: 55px;
          letter-spacing: 1px;
          position: relative;
          text-align: center;
          &::after {
            content: 'SERVICES';
            width: 343px;
            height: 32px;
            font-size: 24px;
            font-family: RobotoMono-Medium, RobotoMono;
            font-weight: 500;
            color: rgba(244, 147, 60, 0.15);
            line-height: 32px;
            letter-spacing: 5px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            z-index: 0;
          }
        }
        .section-title {
          height: 56px;
          font-size: 48px;
          font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
          font-weight: 700;
          color: #000;
          line-height: 56px;
          text-align: center;
          margin-bottom: 55px;
        }
        .shop-container {
          background: #f8f8f8;
          padding-bottom: 101px;
          .shop-nav {
            color: #000;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            width: 1200px;
            margin: 0 auto;
            padding: 53px 0 73px;
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: #acafbf;
            line-height: 19px;
            li {
              -webkit-box-flex: 1;
              -ms-flex: 1;
              flex: 1;
              text-align: center;
              vertical-align: middle;
              line-height: 26px;
              .j-icon {
                width: 18px;
                height: 18px;
                vertical-align: text-bottom;
                margin-right: 5px;
                -webkit-box-orient: vertical;
                -webkit-box-direction: reverse;
                -ms-flex-direction: column-reverse;
              }
            }
          }
          .shop-group {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            .shop-group-carousel {
              width: 655px;
              height: 672px;
              transition: all 0.2s;
              background: url('/static/image/NMN.png') no-repeat 50% / 100% 100%;
              cursor: pointer;
              &:hover {
                background-size: 110% 110% !important;
              }
            }
            .shop-group-item {
              -webkit-box-orient: vertical;
              -webkit-box-direction: normal;
              -ms-flex-direction: column;
              height: 672px;
              background: #fff;
              cursor: pointer;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              flex-direction: column;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              justify-content: center;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              -ms-flex-wrap: nowrap;
              flex-wrap: nowrap;
              .shop-group-item__img {
                width: 274px;
                height: 425px;
                display: block;
              }
              .bg-expand-animation {
                -webkit-transition: all 0.2s;
                -o-transition: all 0.2s;
                transition: all 0.2s;
                background: no-repeat 50% / 100% 100%;
                &:hover {
                  background-size: 110% 110% !important;
                }
              }
              .shop-group-item__content {
                position: relative;
                width: 100%;
                height: 247px;
                font-size: 18px;
                font-family: MicrosoftYaHei;
                color: #3d3f48;
                line-height: 43px;
                text-align: center;
                .shop-group-item__title {
                  font-size: 26px;
                  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
                  font-weight: 700;
                  line-height: 35px;
                  position: relative;
                  margin-top: 55px;
                  padding-bottom: 9px;
                }
                .shop-group-item__title:after {
                  content: '';
                  position: absolute;
                  left: 50%;
                  bottom: 0;
                  -webkit-transform: translate3d(-50%, 0, 0);
                  transform: translate3d(-50%, 0, 0);
                  width: 50px;
                  height: 4px;
                  background: #e44848;
                }
                .shop-group-item__name {
                  margin: 20px 0 0;
                }
                .shop-group-item__desc {
                  color: #e44848;
                }
              }
            }
            .is-reverse {
              -webkit-box-orient: vertical;
              -webkit-box-direction: reverse;
              -ms-flex-direction: column-reverse;
              flex-direction: column-reverse;
            }
          }
        }
      }
      .knowledge {
        height: 820px;
        .section-seq {
          font-size: 42px;
          font-family: RobotoMono-Bold, RobotoMono;
          font-weight: 700;
          color: #000;
          line-height: 55px;
          letter-spacing: 1px;
          position: relative;
          text-align: center;
          &::after {
            content: 'SERVICES';
            width: 343px;
            height: 32px;
            font-size: 24px;
            font-family: RobotoMono-Medium, RobotoMono;
            font-weight: 500;
            color: rgba(244, 147, 60, 0.15);
            line-height: 32px;
            letter-spacing: 5px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            z-index: 0;
          }
        }
        .section-title {
          height: 56px;
          font-size: 48px;
          font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
          font-weight: 700;
          color: #000;
          line-height: 56px;
          text-align: center;
          margin-bottom: 55px;
        }
        .knowledge-nav {
          color: #000;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          -ms-flex-direction: row;
          flex-direction: row;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
          width: 1200px;
          margin: 0 auto;
          padding: 53px 0 73px;
          font-size: 14px;
          font-family: MicrosoftYaHei;
          color: #acafbf;
          line-height: 19px;
          li {
            box-sizing: border-box;
            position: inherit;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            padding-bottom: 0;
            text-align: center;
            vertical-align: middle;
            line-height: 26px;
            .j-icon {
              position: relative;
              bottom: 0;
              cursor: pointer;
              width: 320px;
              height: 320px;
              vertical-align: text-bottom;
              margin-right: 5px;
              -webkit-box-orient: vertical;
              -webkit-box-direction: reverse;
              -ms-flex-direction: column-reverse;
              transition: all 0.4s ease-in-out;
              &:hover {
                position: relative;
                bottom: 18px;
              }
            }
          }
        }
        .knowledge-nav1 {
          color: #000;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          -ms-flex-direction: row;
          flex-direction: row;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
          width: 1200px;
          margin: 0 auto;
          padding: 53px 0 53px;
          font-size: 14px;
          font-family: MicrosoftYaHei;
          color: #acafbf;
          line-height: 19px;
          li {
            cursor: pointer;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            text-align: center;
            vertical-align: middle;
            line-height: 26px;
            .j-icon1 {
              cursor: pointer;
              width: 20px;
              height: 20px;
              vertical-align: text-bottom;
              margin-right: 5px;
              -webkit-box-orient: vertical;
              -webkit-box-direction: reverse;
              -ms-flex-direction: column-reverse;
            }
          }
        }
      }
      .play {
        height: 860px;
        background-color: rgb(31, 31, 9);
      }
    }
    .j-footer {
      box-sizing: border-box;
      width: 100%;
      height: 224px;
      margin-top: auto;
      color: #9da5b3;
      font-size: 14px;
      position: relative;
      background: #181a1f url(/static/image/footer-bg.png) no-repeat 50% / auto 100%;
      .j-footer__top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        height: 184px;
        box-sizing: border-box;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 1200px;
        margin: 0 auto;
        padding-bottom: 25px;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        flex-wrap: nowrap;
        .j-footer__info {
          margin: 30px 0 0 0;
          .j-footer__text {
            font-size: 16px;
            margin-right: 8px;
          }
          .j-footer__tel {
            margin-bottom: 20px;
            margin-top: 10px;
            .icon-tel {
              width: 32px;
              height: 32px;
              background: url('/static/image/400.png') no-repeat;
              background-size: 32px;
              display: inline-block;
              margin-right: 10px;
              vertical-align: middle;
            }
            .j-footer__tel-text {
              font-size: 28px;
              font-family: Aerolinea;
              color: #fff;
              line-height: 42px;
              letter-spacing: 2px;
              vertical-align: middle;
            }
          }
          .j-footer-partners {
            font-size: 16px;
            flex-direction: row;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            flex-wrap: nowrap;
            margin-right: 10px;
            .partner-icon {
              margin-right: 14px;
            }
            img,
            svg {
              vertical-align: middle;
            }
          }
        }

        .j-footer__qrcode[data-v-8aa3dfbc] {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          -ms-flex-direction: row;
          flex-direction: row;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
          .j-footer__qrcode-item:last-child {
            margin-right: 0;
          }

          .j-footer__qrcode-item {
            width: 86px;
            margin-top: 10px;
            margin-right: 40px;
            text-align: center;
            img {
              margin-bottom: 5px;
            }
          }
        }
      }
      .j-footer__bottom {
        box-sizing: border-box;
        width: 1200px;
        height: 40px;
        margin: 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        .copyright {
          font-size: 12px;
          line-height: 40px;
          color: #9da5b3;
          opacity: 0.5;
        }
        .ident-item-icon {
          margin-right: 6px;
        }
        img,
        svg {
          vertical-align: middle;
        }
      }
    }
    .j-footer[data-v-8aa3dfbc]:after {
      content: '';
      width: 100%;
      height: 1px;
      background: rgba(111, 119, 144, 0.25);
      position: absolute;
      left: 0;
      bottom: 40px;
    }
  }
</style>
